<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="/static/css/main.css" rel="stylesheet">
    <title>MongoDB用户管理工具</title>
    <link rel="icon" type="image/svg+xml" href="/static/images/mongodb-icon.svg">
    <link rel="shortcut icon"
        href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><defs><linearGradient id='g' x1='0%' y1='0%' x2='100%' y2='100%'><stop offset='0%' style='stop-color:%234DB33D'/><stop offset='100%' style='stop-color:%233F9A2F'/></linearGradient></defs><path fill='url(%23g)' d='M12 2s-3.5 2.5-3.5 8.5S12 22 12 22s3.5-5.5 3.5-11.5S12 2 12 2z'/><ellipse fill='%232E7D32' cx='12' cy='10.5' rx='3' ry='7'/><path fill='%231B5E20' d='M12 2s-2 1.5-2 6 2 8 2 8s2-3.5 2-8-2-6-2-6z'/><circle fill='%234CAF50' cx='12' cy='8' r='1.5'/></svg>">
</head>

<body>
    <div class="container">
        <div class="header">
            <div style="display: flex; justify-content: space-between; align-items: center;">
                <div>
                    <h1>MongoDB用户管理工具</h1>
                    <p>管理MongoDB用户和权限的Web界面</p>
                </div>
                <div style="text-align: right;">
                    <div id="userInfo" style="margin-bottom: 10px; font-size: 14px;"></div>
                    <button class="btn" onclick="logout()" style="background: #dc3545;">登出</button>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="connection-status">
                <div class="status-indicator" id="connectionStatus"></div>
                <span id="connectionText">未连接</span>
                <div id="currentEnvironment" style="margin-left: 20px; font-weight: bold; color: #667eea;"></div>
                <select id="connectionSelect" class="database-select" style="margin-left: 20px; margin-right: 10px;"
                    onchange="onConnectionSelectChange()" autocomplete="off">
                    <option value="" selected>选择连接进行测试</option>
                </select>
                <button class="btn" id="testConnectionBtn" onclick="testConnection()">测试连接</button>
            </div>
            <div id="connectionMessage"></div>
        </div>

        <div class="card">
            <div class="tabs">
                <div class="tab active" onclick="switchTab('users')">MongoDB用户</div>
                <div class="tab" onclick="switchTab('databases')">数据库列表</div>
                <div class="tab" onclick="switchTab('connections')">连接管理</div>
                <div class="tab" onclick="switchTab('system-users')">系统用户</div>
            </div>

            <div id="users-tab" class="tab-content active">
                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
                    <h3>用户列表</h3>
                    <div style="display: flex; gap: 10px; align-items: center;">
                        <select id="databaseSelect" onchange="loadUsersByDatabase()" class="database-select">
                            <option value="">所有数据库</option>
                        </select>
                        <button class="btn" onclick="showAddUserModal()" style="background: #28a745;">新增用户</button>
                        <button class="btn" onclick="loadUsers()">刷新用户列表</button>
                    </div>
                </div>
                <div id="usersContent">
                    <div class="loading">点击"刷新用户列表"加载数据</div>
                </div>
            </div>

            <div id="databases-tab" class="tab-content">
                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
                    <h3>数据库列表</h3>
                    <div style="display: flex; gap: 10px;">
                        <button class="btn" onclick="showCreateDatabaseModal()"
                            style="background: #28a745;">新建数据库</button>
                        <button class="btn" onclick="loadDatabases()">刷新数据库列表</button>
                    </div>
                </div>
                <div id="databasesContent">
                    <div class="loading">点击"刷新数据库列表"加载数据</div>
                </div>
            </div>

            <div id="connections-tab" class="tab-content">
                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
                    <h3>MongoDB连接管理</h3>
                    <div>
                        <button class="btn" onclick="showAddConnectionModal()"
                            style="background: #28a745; margin-right: 10px;">新增连接</button>
                        <button class="btn" onclick="testAllConnections()"
                            style="background: #ffc107; color: #212529; margin-right: 10px;">测试所有连接</button>
                        <button class="btn" onclick="loadConnections()">刷新连接列表</button>
                    </div>
                </div>
                <div id="connectionsContent">
                    <div class="loading">点击"刷新连接列表"加载数据</div>
                </div>
            </div>

            <div id="system-users-tab" class="tab-content">
                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
                    <h3>系统用户管理</h3>
                    <div>
                        <button class="btn" onclick="showChangePasswordModal()"
                            style="background: #17a2b8; margin-right: 10px;">修改密码</button>
                        <button class="btn" onclick="showProfileModal()"
                            style="background: #6f42c1; margin-right: 10px;">个人信息</button>
                        <button class="btn" onclick="showCreateSystemUserModal()"
                            style="background: #28a745; margin-right: 10px;" id="createUserBtn">新增用户</button>
                        <button class="btn" onclick="loadSystemUsers()">刷新用户列表</button>
                    </div>
                </div>
                <div id="systemUsersContent">
                    <div class="loading">点击"刷新用户列表"加载数据</div>
                </div>
            </div>
        </div>
    </div>

    <!-- 新建数据库弹窗 -->
    <div id="createDatabaseModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>新建数据库</h3>
                <span class="close" onclick="closeCreateDatabaseModal()">&times;</span>
            </div>

            <form id="createDatabaseForm">
                <div class="form-group">
                    <label for="databaseName">数据库名称 *</label>
                    <input type="text" id="databaseName" name="databaseName" required placeholder="输入数据库名称">
                </div>

                <div class="form-group">
                    <label for="collectionName">集合名</label>
                    <input type="text" id="collectionName" name="collectionName"
                        placeholder="创建数据库时必须创建一个集合，若不填写，默认为test">
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn-cancel" onclick="closeCreateDatabaseModal()">取消</button>
                    <button type="submit" class="btn-submit" id="submitDatabaseBtn">创建数据库</button>
                </div>
            </form>
        </div>
    </div>

    <!-- 新增用户弹窗 -->
    <div id="addUserModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>新增MongoDB用户</h3>
                <span class="close" onclick="closeAddUserModal()">&times;</span>
            </div>

            <form id="addUserForm">
                <div class="form-group">
                    <label for="targetDatabase">目标数据库 *</label>
                    <select id="targetDatabase" name="targetDatabase" required>
                        <option value="">请选择数据库</option>
                    </select>
                </div>

                <div class="form-group">
                    <label for="newUsername">用户名 *</label>
                    <input type="text" id="newUsername" name="newUsername" required placeholder="输入用户名">
                </div>

                <div class="form-group">
                    <label for="newPassword">密码 *</label>
                    <input type="password" id="newPassword" name="newPassword" required placeholder="输入密码">
                </div>

                <div class="form-group">
                    <label for="confirmPassword">确认密码 *</label>
                    <input type="password" id="confirmPassword" name="confirmPassword" required placeholder="再次输入密码">
                </div>

                <div class="roles-section">
                    <h4>用户角色</h4>
                    <button type="button" class="add-role-btn" onclick="addRoleItem()">+ 添加角色</button>
                    <div id="rolesContainer">
                        <!-- 角色项将在这里动态添加 -->
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn-cancel" onclick="closeAddUserModal()">取消</button>
                    <button type="submit" class="btn-submit" id="submitUserBtn">创建用户</button>
                </div>
            </form>
        </div>
    </div>

    <!-- 编辑用户弹窗 -->
    <div id="editUserModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>编辑MongoDB用户</h3>
                <span class="close" onclick="closeEditUserModal()">&times;</span>
            </div>

            <form id="editUserForm">
                <div class="form-group">
                    <label for="editTargetDatabase">目标数据库</label>
                    <input type="text" id="editTargetDatabase" name="editTargetDatabase" readonly
                        style="background-color: #f5f5f5; cursor: not-allowed;">
                </div>

                <div class="form-group">
                    <label for="editUsername">用户名</label>
                    <input type="text" id="editUsername" name="editUsername" readonly
                        style="background-color: #f5f5f5; cursor: not-allowed;">
                </div>

                <div class="form-group">
                    <label for="editNewPassword">新密码（留空则不修改）</label>
                    <input type="password" id="editNewPassword" name="editNewPassword" placeholder="输入新密码（可选）">
                </div>

                <div class="form-group">
                    <label for="editConfirmPassword">确认新密码</label>
                    <input type="password" id="editConfirmPassword" name="editConfirmPassword" placeholder="再次输入新密码">
                </div>

                <div class="roles-section">
                    <h4>用户角色</h4>
                    <button type="button" class="add-role-btn" onclick="addEditRoleItem()">+ 添加角色</button>
                    <div id="editRolesContainer">
                        <!-- 角色项将在这里动态添加 -->
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn-cancel" onclick="closeEditUserModal()">取消</button>
                    <button type="submit" class="btn-submit" id="submitEditUserBtn">更新用户</button>
                </div>
            </form>
        </div>
    </div>

    <!-- 修改密码弹窗 -->
    <div id="changePasswordModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>修改密码</h3>
                <span class="close" onclick="closeChangePasswordModal()">&times;</span>
            </div>

            <form id="changePasswordForm">
                <div class="form-group">
                    <label for="currentPassword">当前密码 *</label>
                    <input type="password" id="currentPassword" name="currentPassword" required placeholder="输入当前密码">
                </div>

                <div class="form-group">
                    <label for="newPassword">新密码 *</label>
                    <input type="password" id="newPassword" name="newPassword" required placeholder="输入新密码（至少6位）">
                </div>

                <div class="form-group">
                    <label for="confirmNewPassword">确认新密码 *</label>
                    <input type="password" id="confirmNewPassword" name="confirmNewPassword" required
                        placeholder="再次输入新密码">
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn-cancel" onclick="closeChangePasswordModal()">取消</button>
                    <button type="submit" class="btn-submit" id="submitChangePasswordBtn">修改密码</button>
                </div>
            </form>
        </div>
    </div>

    <!-- 个人信息弹窗 -->
    <div id="profileModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>个人信息</h3>
                <span class="close" onclick="closeProfileModal()">&times;</span>
            </div>

            <form id="profileForm">
                <div class="form-group">
                    <label for="profileUsername">用户名</label>
                    <input type="text" id="profileUsername" name="profileUsername" readonly
                        style="background-color: #f5f5f5; cursor: not-allowed;">
                </div>

                <div class="form-group">
                    <label for="profileEmail">邮箱</label>
                    <input type="email" id="profileEmail" name="profileEmail" placeholder="输入邮箱地址">
                </div>

                <div class="form-group">
                    <label for="profileFullName">全名</label>
                    <input type="text" id="profileFullName" name="profileFullName" placeholder="输入全名">
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn-cancel" onclick="closeProfileModal()">取消</button>
                    <button type="submit" class="btn-submit" id="submitProfileBtn">更新信息</button>
                </div>
            </form>
        </div>
    </div>

    <!-- 新增系统用户弹窗 -->
    <div id="createSystemUserModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>新增系统用户</h3>
                <span class="close" onclick="closeCreateSystemUserModal()">&times;</span>
            </div>

            <form id="createSystemUserForm">
                <div class="form-group">
                    <label for="systemUsername">用户名 *</label>
                    <input type="text" id="systemUsername" name="systemUsername" required placeholder="输入用户名">
                </div>

                <div class="form-group">
                    <label for="systemPassword">密码 *</label>
                    <input type="password" id="systemPassword" name="systemPassword" required placeholder="输入密码（至少6位）">
                </div>

                <div class="form-group">
                    <label for="systemEmail">邮箱</label>
                    <input type="email" id="systemEmail" name="systemEmail" placeholder="输入邮箱地址">
                </div>

                <div class="form-group">
                    <label for="systemFullName">全名</label>
                    <input type="text" id="systemFullName" name="systemFullName" placeholder="输入全名">
                </div>

                <div class="form-group">
                    <label>
                        <input type="checkbox" id="systemIsAdmin" name="systemIsAdmin">
                        管理员权限
                    </label>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn-cancel" onclick="closeCreateSystemUserModal()">取消</button>
                    <button type="submit" class="btn-submit" id="submitSystemUserBtn">创建用户</button>
                </div>
            </form>
        </div>
    </div>

    <!-- 编辑系统用户弹窗 -->
    <div id="editSystemUserModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>编辑系统用户</h3>
                <span class="close" onclick="closeEditSystemUserModal()">&times;</span>
            </div>

            <form id="editSystemUserForm">
                <input type="hidden" id="editSystemUserId" name="editSystemUserId">

                <div class="form-group">
                    <label for="editSystemUsername">用户名</label>
                    <input type="text" id="editSystemUsername" name="editSystemUsername" readonly
                        style="background-color: #f5f5f5; cursor: not-allowed;">
                </div>

                <div class="form-group">
                    <label for="editSystemEmail">邮箱</label>
                    <input type="email" id="editSystemEmail" name="editSystemEmail" placeholder="输入邮箱地址">
                </div>

                <div class="form-group">
                    <label for="editSystemFullName">全名</label>
                    <input type="text" id="editSystemFullName" name="editSystemFullName" placeholder="输入全名">
                </div>

                <div class="form-group">
                    <label for="editSystemNewPassword">新密码（留空则不修改）</label>
                    <input type="password" id="editSystemNewPassword" name="editSystemNewPassword"
                        placeholder="输入新密码（可选）">
                </div>

                <div class="form-group">
                    <label>
                        <input type="checkbox" id="editSystemIsActive" name="editSystemIsActive">
                        账号激活
                    </label>
                </div>

                <div class="form-group">
                    <label>
                        <input type="checkbox" id="editSystemIsAdmin" name="editSystemIsAdmin">
                        管理员权限
                    </label>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn-cancel" onclick="closeEditSystemUserModal()">取消</button>
                    <button type="submit" class="btn-submit" id="submitEditSystemUserBtn">更新用户</button>
                </div>
            </form>
        </div>
    </div>

    <!-- 新增连接弹窗 -->
    <div id="addConnectionModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>新增MongoDB连接</h3>
                <span class="close" onclick="closeAddConnectionModal()">&times;</span>
            </div>

            <form id="addConnectionForm">
                <div class="form-group">
                    <label for="connectionName">连接名称 *</label>
                    <input type="text" id="connectionName" name="connectionName" required placeholder="输入连接名称">
                </div>

                <div class="form-group">
                    <label for="connectionHost">主机地址 *</label>
                    <input type="text" id="connectionHost" name="connectionHost" required
                        placeholder="例如: localhost 或 192.168.1.100">
                </div>

                <div class="form-group">
                    <label for="connectionPort">端口 *</label>
                    <input type="number" id="connectionPort" name="connectionPort" required placeholder="默认: 27017"
                        value="27017">
                </div>

                <div class="form-group">
                    <label for="connectionUsername">用户名 *</label>
                    <input type="text" id="connectionUsername" name="connectionUsername" required
                        placeholder="MongoDB用户名">
                </div>

                <div class="form-group">
                    <label for="connectionPassword">密码 *</label>
                    <input type="password" id="connectionPassword" name="connectionPassword" required
                        placeholder="MongoDB密码">
                </div>

                <div class="form-group">
                    <label for="connectionAuthDb">认证数据库</label>
                    <input type="text" id="connectionAuthDb" name="connectionAuthDb" placeholder="默认: admin"
                        value="admin">
                </div>

                <div class="form-group">
                    <label>
                        <input type="checkbox" id="connectionSSL" name="connectionSSL">
                        启用SSL连接
                    </label>
                </div>

                <div class="form-group">
                    <label>
                        <input type="checkbox" id="connectionActive" name="connectionActive">
                        设为活跃连接
                    </label>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn-cancel" onclick="closeAddConnectionModal()">取消</button>
                    <button type="submit" class="btn-submit" id="submitConnectionBtn">创建连接</button>
                </div>
            </form>
        </div>
    </div>

    <!-- 编辑连接弹窗 -->
    <div id="editConnectionModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>编辑MongoDB连接</h3>
                <span class="close" onclick="closeEditConnectionModal()">&times;</span>
            </div>

            <form id="editConnectionForm">
                <input type="hidden" id="editConnectionId" name="editConnectionId">

                <div class="form-group">
                    <label for="editConnectionName">连接名称 *</label>
                    <input type="text" id="editConnectionName" name="editConnectionName" required placeholder="输入连接名称">
                </div>

                <div class="form-group">
                    <label for="editConnectionHost">主机地址 *</label>
                    <input type="text" id="editConnectionHost" name="editConnectionHost" required
                        placeholder="例如: localhost 或 192.168.1.100">
                </div>

                <div class="form-group">
                    <label for="editConnectionPort">端口 *</label>
                    <input type="number" id="editConnectionPort" name="editConnectionPort" required
                        placeholder="默认: 27017">
                </div>

                <div class="form-group">
                    <label for="editConnectionUsername">用户名 *</label>
                    <input type="text" id="editConnectionUsername" name="editConnectionUsername" required
                        placeholder="MongoDB用户名">
                </div>

                <div class="form-group">
                    <label for="editConnectionPassword">密码 *</label>
                    <input type="password" id="editConnectionPassword" name="editConnectionPassword" required
                        placeholder="MongoDB密码">
                </div>

                <div class="form-group">
                    <label for="editConnectionAuthDb">认证数据库</label>
                    <input type="text" id="editConnectionAuthDb" name="editConnectionAuthDb" placeholder="默认: admin">
                </div>

                <div class="form-group">
                    <label>
                        <input type="checkbox" id="editConnectionSSL" name="editConnectionSSL">
                        启用SSL连接
                    </label>
                </div>

                <div class="form-group">
                    <label>
                        <input type="checkbox" id="editConnectionActive" name="editConnectionActive">
                        设为活跃连接
                    </label>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn-cancel" onclick="closeEditConnectionModal()">取消</button>
                    <button type="submit" class="btn-submit" id="submitEditConnectionBtn">更新连接</button>
                </div>
            </form>
        </div>
    </div>

    <!-- 引入JavaScript文件 -->
    <script src="/static/js/main.js"></script>
    <script src="/static/js/events.js"></script>
</body>

</html>